/**
 * 动态替换容器内容，并确保 HTML、JavaScript、CSS 正确加载和执行
 * @param {string} containerId - 要替换的容器 ID
 * @param {string} newContent - 新内容（包含 HTML、JS、CSS）
 */
function replaceContentWithResources(containerId, newContent) {
  const container = document.getElementById(containerId);
  if (!container) {
    console.error(`Container with ID "${containerId}" not found.`);
    return;
  }

  // 1. 清空容器并插入新内容（此时脚本和样式不会自动加载）
  container.innerHTML = newContent;

  // 2. 处理所有 <style> 和 <link rel="stylesheet">（确保 CSS 生效）
  const styles = container.querySelectorAll('style, link[rel="stylesheet"]');
  styles.forEach((oldStyle) => {
    const newStyle = oldStyle.cloneNode(true); // 深拷贝
    document.head.appendChild(newStyle); // 插入到 head
    oldStyle.remove(); // 移除旧样式
  });

  // 3. 处理所有 <script>（确保 JS 执行）
  const scripts = container.querySelectorAll('script');
  scripts.forEach((oldScript) => {
    const newScript = document.createElement('script');

    // 拷贝所有属性（如 id, src, type, async, defer 等）
    Array.from(oldScript.attributes).forEach((attr) => {
      newScript.setAttribute(attr.name, attr.value);
    });

    // 处理内联脚本
    if (!oldScript.src) {
      newScript.textContent = oldScript.textContent;
    }

    // 插入到 body，触发执行（外部脚本会自动加载）
    document.body.appendChild(newScript);
    oldScript.remove(); // 移除旧脚本
  });
}
